<template>
  <!-- 左侧导航栏 -->
  <div class="leftmenu">
    <scroll class="left-scroll">
      <dl>
        <router-link :to="item.link"
                     v-for="(item,index) in list"
                     :key="index">
          <dd :class="{title:item.image=='',action:currentIndex==index}"
              @click="checkClick(index)">
            <div>
              <i v-if="index==1" class="iconfont icon-yinle"></i>
              <i v-if="index==2" class="iconfont icon-MV"></i>
              <i v-if="index==3" class="iconfont icon-zhuanji"></i>
              <i v-if="index==4" class="iconfont icon-diantaizhibo"></i>
            </div>
            {{item.title}}
          </dd>
        </router-link>
        <my-song-list />
      </dl>
    </scroll>
  </div>
</template>

<script>
import MySongList from '../../views/user/MySongList.vue'
import Scroll from '../common/scroll/Scroll.vue'
export default {
  name: 'LeftMenu',
  components: {
    MySongList,
    Scroll,
  },
  data () {
    return {
      list: [
        { link: '', image: '', title: '推荐' },
        { link: '/discover', title: '发现音乐' },
        { link: '/allmv', title: '全部MV' },
        { link: '/album', title: '新碟上架' },
        { link: '/recomradio', title: '推荐电台' },
      ],
      currentIndex: 1
    }
  },
  methods: {
    checkClick (index) {
      if (this.list[index].image === '') return
      this.currentIndex = index
    }
  }
}
</script>

<style scoped>
.leftmenu {
  background: #f7f7f7;
  width: 20%;
  height: calc(100% - 54px - 59px);
  float: left;
  color: #000;
}
.left-scroll {
  height: 100%;
  overflow: hidden;
}
dl {
  width: 100%;
  height: 100%;
}
dl a {
  color: #000;
  text-decoration: none;
}
.title {
  font-size: 13px;
  margin-top: 10px;
  opacity: 0.9;
  padding-left: 1px;
}
dd {
  height: 30px;
  line-height: 30px;
  padding: 5px 15px;
  font-size: 14px;
  opacity: 0.9;
  display: flex;
  align-items: center;
}
dd:hover {
  opacity: 1;
  color: #fff;
  background: #06d1a5;
}
dd div {
  margin-top: 10px;
  margin-right: 10px;
}
dd img {
  width: 20px;
  height: 20px;
}
.action {
  border-left: 2px solid #fafafa;
  background: #08b690;
  color: #fff;
}
</style>
